@import url(./reset.css);

:root {
  --bg-color: #f1f1f1;

  --header-bg-color: #fcfcfc;
  --header-text-color: #212121;

  --text-primary-color: #555;
  --text-nouse-color: #777;

  --symbol-primary-color: #555;
  --symbol-active-color: #000;
  --symbol-nouse-color: #999;

  --content-bg-color: #fcfcfc;

  --symbol-edit-bg-color: #C8E6C9;

  --button-primary-bg-color: #fff;
  --button-primary-text-color: #555;

  --rate-tip-color: #ddd;
}

@media (prefers-color-scheme: dark) {
  :root {
    --symbol-primary-color: #aaa;
    --symbol-nouse-color: #333;
  }
}



@media screen and (orientation: landscape) {
  #main {
    display: flex;
  }

  #tip {
    display: none;
  }
}

@media screen and (orientation: portrait) {
  #main {
    display: none !important;
  }

  #tip {
    display: flex;
  }
}

html {
  font-size: 2vmin;
  overflow-x: hidden;
}

body {
  background: var(--bg-color);
  user-select: none;
  overflow-x: hidden;
}

.icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}

button {
  color: var(--button-primary-text-color);
  background: var(--button-primary-bg-color);
  outline: none;
  border: 0;
  box-shadow: 0px 0px 8px rgba(0, 0, 0, .1);
  padding: 0.5vmin 2vmin;
  border-radius: 8px;
  margin-left: 2vmin;
  font-size: 3vmin;


}

button:active {
  box-shadow: 0px 0px 2px rgba(0, 0, 0, .1);
}

button:disabled {
  filter: grayscale(1);
  opacity: 0.5;

}



@keyframes rotate {
  0% {
    transform: rotate(0);
  }

  5% {
    transform: rotate(0);
  }

  50% {
    transform: rotate(-90deg);
  }

  95% {
    transform: rotate(-90deg);
  }

  100% {
    transform: rotate(-90deg);
  }
}


.modal {
  width: 100vw;
  height: 100vh;
  position: absolute;
  top: 0;
  left: 0;
  backdrop-filter: blur(10px);
  display: none;
  z-index: 999;
}

.modal .close {
  width: 4vmin;
  height: 4vmin;
  border-radius: 100%;
  position: fixed;
  right: 4vw;
  top: 1vh;
  background: #000;


}

.modal .close::before,
.modal .close::after {
  content: " ";
  display: block;
  border-top: solid 2px #fff;
  width: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%) rotate(45deg);
}

.modal .close::after {
  transform: translateX(-50%) translateY(-50%) rotate(-45deg);
}

.modal.show {
  display: block;
  animation: showModal 0.3s;
  animation-timing-function: ease-in-out;
}


.modal-content {
  padding: 6vh 4vw;
  display: flex;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

.modal-content .remark {
  width: 100%;
  border: solid 1px #ccc;
  padding: 4vmin;
  outline: none;
}


@keyframes showModal {
  from {
    opacity: 0;
    backdrop-filter: blur(0);
  }

  to {
    opacity: 1;
    backdrop-filter: blur(10px);
  }
}